<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@page import="com.joinlabs.entity.Wares"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path", path);
response.setHeader("Access-Control-Allow-Origin", "*");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<script type="text/javascript" src="/common/js/jquery-1.11.3.js" charset="utf-8"></script>
		<link href='/common/css/product/style.css' rel="stylesheet" type="text/css" />
		
   		<link rel="stylesheet" href="/common/layui/css/layui.css">
   		<script src="/common/layui/layui.js" charset="utf-8"></script>
		
		<title>商品详情</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		
		<style>
 #zxd_x{width:20px; height:20px;text-align:center;font-size:16px;color:red;position:absolute;right:0px; top:0px;cursor:pointer;}
</style>
		
		<script type="text/javascript">
			
			$(document).ready(function() {
				$("#jrgwc1").click(function() {
					if(${wares.waresGrounding != 0 && wares.waresCount>0}){
						if($("#yanse1").attr("isFlag") == "0") {
							if($("#yanse2").attr("isFlag") == "0" || $("#yanse2").attr("isFlag") == null){
								alert("亲！您还没选择颜色呢！")
							}
							
						}
						if($("#banben1").attr("isFlag") == "0") {
							if($("#banben2").attr("isFlag") == "0" || $("#banben2").attr("isFlag") == null){
								alert("亲！您还没选择版本呢！")
							}
							
						}
						if($("#banben1").attr("isFlag") == "1" || $("#banben2").attr("isFlag") == "1") {
							
							if($("#yanse1").attr("isFlag") == "1" || $("#yanse2").attr("isFlag") == "1") {

								if($("#banben1").attr("isFlag") == "1" && $("#yanse1").attr("isFlag") == "1") {

									location.href = "/shopcar/addpro?&waresId=${wares.waresId}&waresEdition=${wares.waresEdition1}&waresColor=${wares.waresColor1}&waresPrice=${wares.waresPrice1}&waresImg=${wares.imgA}";
																	
								}else if($("#banben1").attr("isFlag") == "1" && $("#yanse2").attr("isFlag") == "1") {
									
									location.href = "/shopcar/addpro?&waresId=${wares.waresId}&waresEdition=${wares.waresEdition1}&waresColor=${wares.waresColor2}&waresPrice=${wares.waresPrice1}&waresImg=${wares.imgB}";
									
								}else if($("#banben2").attr("isFlag") == "1" && $("#yanse1").attr("isFlag") == "1") {
									
									location.href = "/shopcar/addpro?&waresId=${wares.waresId}&waresEdition=${wares.waresEdition2}&waresColor=${wares.waresColor1}&waresPrice=${wares.waresPrice2}&waresImg=${wares.imgA}";

								}else if($("#banben2").attr("isFlag") == "1" && $("#yanse2").attr("isFlag") == "1") {

									location.href = "/shopcar/addpro?&waresId=${wares.waresId}&waresEdition=${wares.waresEdition2}&waresColor=${wares.waresColor2}&waresPrice=${wares.waresPrice2}&waresImg=${wares.imgB}";

								}

							}

						}
					}
					else{
						$("#jrgwc1").attr("disabled", true);
						if(${wares.waresGrounding==0}){
							alert("亲！因为不可抗力因素，商品已下架")
							}else if(${wares.waresCount < 1}){
								alert("亲！商品已售完，补货中。。。")
							}
					}
					
				}) 
				//广告按钮
				$("#gbgg").click(function() {
					
					$("#gggg").attr("class", "content layui-anim-rotate layui-anim-loop");
					$("#bbb").text("");
					
				});
				
				//收藏按钮
				$("#enshrine").click(function() {
					
					 $.post("/product/enshrine", {
							"userId": "${user.userId}",
							"waresId": ${wares.waresId}
						}, function(data) {
							alert(data);
						});
					
				});
				
				//版本按钮
				$("#banben1").click(function() {
					if($(this).attr("isFlag") == "0") {
						$("#banben2").removeClass("xzbbclick1");
						$("#banben2").addClass("banben");
						$("#banben2").attr("isFlag", "0");
						$(this).removeClass("banben");
						$(this).addClass("xzbbclick1");
						$(this).attr("isFlag", "1");
						$("#zmoney").text("${wares.waresPrice1}");
						$("#zbanben").text("${wares.waresEdition1}");
						$("#btprice").text("${wares.waresPrice1}");
					} else {
						$(this).removeClass("xzbbclick1");
						$(this).addClass("banben");
						$(this).attr("isFlag", "0");
					}
				});
				$("#banben2").click(function() {
					if($(this).attr("isFlag") == "0") {
						$("#banben1").removeClass("xzbbclick1");
						$("#banben1").addClass("banben");
						$("#banben1").attr("isFlag", "0");
						$(this).removeClass("banben");
						$(this).addClass("xzbbclick1");
						$(this).attr("isFlag", "1");
						$("#zmoney").text("${wares.waresPrice2}");
						$("#zbanben").text("${wares.waresEdition2}");
						$("#btprice").text("${wares.waresPrice2}");
					} else {
						$(this).removeClass("xzbbclick1");
						$(this).addClass("banben");
						$(this).attr("isFlag", "0");
					}
				});
				//颜色按钮
				$("#yanse1").click(function() {
					if($(this).attr("isFlag") == "0") {

						$("#yanse2").removeClass("xzbbclick1");
						$("#yanse2").addClass("banben");
						$("#yanse2").attr("isFlag", "0");
						$(this).removeClass("banben");
						$(this).addClass("xzbbclick1");
						$(this).attr("isFlag", "1");
						$("#zcolor").text("${wares.waresColor1}");
						$("#picpath").attr("src", "http://localhost:8083/fileserver/wares/${wares.imgA}");

					} else {
						$(this).removeClass("xzbbclick1");
						$(this).addClass("banben");
						$(this).attr("isFlag", "0");
					}
				});
				$("#yanse2").click(function() {
					if($(this).attr("isFlag") == "0") {
						$("#yanse1").removeClass("xzbbclick1");
						$("#yanse1").addClass("banben");
						$("#yanse1").attr("isFlag", "0");
						$(this).removeClass("banben");
						$(this).addClass("xzbbclick1");
						$(this).attr("isFlag", "1");
						$("#zcolor").text("${wares.waresColor2}");
						$("#picpath").attr("src", "http://localhost:8083/fileserver/wares/${wares.imgB}");
					} else {
						$(this).removeClass("xzbbclick1");
						$(this).addClass("banben");
						$(this).attr("isFlag", "0");
					}
				});
				

			});	
			window.alert = function(msg, callback) {
				var div = document.createElement("div");
				div.innerHTML = "<style type=\"text/css\">" +
					".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       " +
					".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            " +
					".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }" +
					".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         " +
					".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           " +
					".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 20px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          " +
					".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          " +
					".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               " +
					".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       " +
					".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             " +
					".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }" +
					"</style>" +
					"<div id=\"dialogs2\" style=\"display: none\">" +
					"<div class=\"nbaMask\"></div>" +
					"<div class=\"nbaDialog\">" +
					"	<div class=\"nbaDialogHd\">" +
					"		<strong class=\"nbaDialogTitle\"></strong>" +
					"	</div>" +
					"	<div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>" +
					"	<div class=\"nbaDialogHd\">" +
					"		<strong class=\"nbaDialogTitle\"></strong>" +
					"	</div>" +
					"	<div class=\"nbaDialogFt\">" +
					"		<a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>" +
					"	</div></div></div>";
				document.body.appendChild(div);

				var dialogs2 = document.getElementById("dialogs2");
				dialogs2.style.display = 'block';

				var dialog_msg2 = document.getElementById("dialog_msg2");
				dialog_msg2.innerHTML = msg;

				// var dialog_cancel = document.getElementById("dialog_cancel");
				// dialog_cancel.onclick = function() {
				// dialogs2.style.display = 'none';
				// };
				var dialog_ok2 = document.getElementById("dialog_ok2");
				dialog_ok2.onclick = function() {
					dialogs2.style.display = 'none';
					callback();
				};
			};
		</script>
	</head>



	<body>
		<!-- start header -->
		
		<c:if test="${sessionScope.usercolor == null}">
		<header id="backcolor1" style="background: #671B0D;">
		</c:if>
		<c:if test="${sessionScope.usercolor != null}">
		<header id="backcolor1" style="background:${sessionScope.usercolor};">
		</c:if>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li>
							<a href="/user/loginreg/index" target="_blank">JoinLabs商城</a>
						</li>
						<li>|</li>
						<li>
							<a href="/product/fytype">Joinlabs全部商品</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY聊</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY游戏</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY阅读</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY服务</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY金融</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY商城移动版</a>
						</li>
						<li>|</li>
						<li>
							<a href="">风格</a>	
						</li>
						
						<li>
							
							 <div id="test1"></div>
							 <script>
								layui.use('colorpicker', function(){
								  var $ = layui.$
								  ,colorpicker = layui.colorpicker;
								  //常规使用
								  colorpicker.render({
								    elem: '#test1' //绑定元素
								    ,change: function(color){ //颜色改变的回调
								    	//console.log(color);
								    	$("#backcolor1").attr("style","background: "+color+";");
								    	$("#backcolor2").attr("style","margin-top: 100px;background:"+color+";color:#B0B0B0;");
								    	$("#jrgwc1").attr("style","background: "+color+";");
										
								    	
								    },done: function(color){
								        console.log(color)
								       
								        $.post("/product/procolor", {
											"usercolor": color,
										}, function(data) {
											if(data == "success") {
												alert("选择颜色成功,有眼光呀！");

											}else{
												alert("出了点小错误，其实默认色挺好的");
											}
										});
								        
								      }
								  });
								});
								</script>
						</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr">
						<a href="/shopcar/show">购物车</a>
					</div>
					<div class="fr">
						
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
		<!--end header -->

		<!-- start banner_x -->
		<div class="banner_x center" style="margin-top:10px;">

		<a href="${path}/index">
			<div class="ad_top fl">
				<img src="http://localhost:8083/fileserver/wares/logo1.jpg"
					style="width: 200px; height: 100%;">
			</div>
		</a>
		<div class="nav fl">
			<ul>
				<li><a href="/product/showtype?tid=1">手机</a></li>
				<li><a href="/product/showtype?tid=2">数码</a></li>
				<li><a href="/product/showtype?tid=3">家电</a></li>
				<li><a href="/product/showtype?tid=4">家居</a></li>
				<li><a href="/product/showtype?tid=5">服饰</a></li>
				<li><a href="/product/showtype?tid=6">食品</a></li>
				<li><a href="/product/showtype?tid=7">图书</a></li>
				<li><a href="/product/showtype?tid=8">鞋子</a></li>
				<li><a href="/product/showtype?tid=9">首饰</a></li>
			</ul>
		</div>
		<div class="search fr">
			<form action="/product/selectlike" method="post">
					<div class="text fl">
						<input type="text" class="shuru" placeholder="JAVA大数据&nbsp;UI设计" name="likeName" style="border-bottom: 1px solid;">
					</div>
					<div class="submit fl">
						<input type="submit" class="sousuo" value="搜索" />
					</div>
					<div class="clear"></div>
				</form>
			<div class="clear"></div>
		</div>
	</div>
	<!-- 快捷按钮  -->
		<script>
layui.use(['util', 'laydate', 'layer'], function(){
  var util = layui.util
  ,laydate = layui.laydate
  ,layer = layui.layer;
  //固定块
  util.fixbar({
    bar1: true
    ,bar2: true
    ,css: {right: 50, bottom: 100}
    ,bgcolor: '#393D49'
    ,click: function(type){
      if(type === 'bar1'){
        layer.msg('回到首页');
        location.href = "/user/loginreg/index";
		
      } else if(type === 'bar2') {
        layer.msg('回到全部商品');
        location.href = "/product/fytype";
        
      }
    }
  });
  
});
</script>
		<!-- end banner_x -->




		<!-- xiangqing -->
		<form action="post" method="">
			<div class="xiangqing" style="border-top: 1px solid #B0B0B0;">
				<div class="neirong w">
					<div class="xiaomi6 fl"><span id="pro-xiangq-name">
				${wares.waresName}
			</span></div>
					<nav class="fr">
						<div id="" class="fr">

							<li class="fr" id="tiaozhuangaishu">
								<a href="/product/proskr?waresId=${wares.waresId}&count=${count}">概述</a>
							</li>
							<li>|</li>
							<li class="fr" id="tiaozhuancanshu">
								<a href="/product/proconfig?waresId=${wares.waresId}&count=${count}">参数</a>
							</li>
							<li>|</li>
							<li class="fr">
								<a href="/product/prolevel?waresId=${wares.waresId}&count=${count}">商品评价&nbsp;<span class="layui-badge">${count}</span></a>
							</li>
							
							<div class="clear"></div>
						</div>
					</nav>
					<div class="clear"></div>
				</div>
			</div>
			
<div style="z-index:999;display: block; position: fixed; left: 0px; top: 40%;">
<div id="zxd_x" class="">
  <a title="点击关闭" id="gbgg"><b id="bbb" style="font-size:10px">X</b></a></div>
  <div class="content" id="gggg"><a href="/product/pro?pid=84"><img src="http://localhost:8083/fileserver/wares/kltps/tpsgg.jpg"  style="width:150px;"></a></div>
</div>

			<div class="jieshao mt20 w">
				<div class="left fl"><img src="http://localhost:8083/fileserver/wares/${wares.imgA}" style="width: 610px;height:610px;" id="picpath"></div>
				<div class="right fr">
					<div class="h3 ml20 mt20">${wares.waresName}&nbsp;&nbsp;&nbsp;<span style="font-size:10px;color:red;">月销:${wares.salesVolume}</span></div>
					<div class="jianjie mr40 ml20 mt10">
						${wares.waresSuggest}	
					</div>
						<c:if test="${wares.waresUser==1}"><div class="jiage ml20 mt10">卓应官营</div></c:if>
						<c:if test="${wares.waresUser==2}"><div class="jiage ml20 mt10">个人自营</div></c:if>
					<div class="jiage ml20 mt10">
					<c:if test="${wares.waresPrice2 == null}"><span id="btprice">${wares.waresPrice1}</span></c:if>
					<c:if test="${wares.waresPrice2 != null}"><span id="btprice">${wares.waresPrice1}~${wares.waresPrice2}</span></c:if>
					元</div>

					<div class="ft20 ml20 mt20">选择版本</div>
					<div class="xzbb ml20 mt10" style="text-align: center;">
						<div class="banben fl" id="banben1" bbxz="1" isFlag="0">
							<a>
								<span>${wares.waresEdition1}</span>
								<span>${wares.waresPrice1}元</span>
							</a>
						</div>
						<c:if test="${wares.waresPrice2 != 0 && wares.waresEdition2 != null}">
							<div class="banben fr" id="banben2" bbxz="1" isFlag="0">
								<a>
									<span>${wares.waresEdition2}</span>
									<span>${wares.waresPrice2}元</span>
								</a>
							</div>
						</c:if>
						<div class="clear"></div>
					</div>

					<div class="ft20 ml20 mt20">选择颜色</div>
					<div class="xzbb ml20 mt10">
						<div class="banben fl" id="yanse1" isFlag="0">
							<a>

								<img src="http://localhost:8083/fileserver/wares/${wares.imgA}" style="width: 55px;height:100%;float:left;margin-left:30%;">

								<div class="yanse">${wares.waresColor1}</div>
							</a>

						</div>
						<c:if test="${wares.waresColor2!=null}">
							<div class="banben fr" id="yanse2" isFlag="0">
								<a>
									<img src="http://localhost:8083/fileserver/wares/${wares.imgB}" style="width: 55px;height:100%;float:left;margin-left:30%;">

									<div class="yanse">${wares.waresColor2}</div>
								</a>
							</div>
						</c:if>
					</div>

					<div class="xqxq mt20 ml20">
						<div class="top1 mt10">
							<div class="left1 fl" id="zdetail">${wares.waresName} <span id="zbanben"></span> <span id="zcolor"></span></div>

							<div class="clear"></div>
						</div>
						<div class="bot mt20 ft20 ftbc">总计：<span id="zmoney">0</span>元</div>
					</div>
					<div class="xiadan ml20 mt20" style="margin-bottom: 30px;">
						<c:if test="${sessionScope.usercolor == null}">
						<input class="jrgwc" type="button" name="jrgwc" value="加入购物车" id="jrgwc1" style="background:#671B0D;" />
						</c:if>
						<c:if test="${sessionScope.usercolor != null}">
						<input class="jrgwc" type="button" name="jrgwc" value="加入购物车" id="jrgwc1" style="background:${sessionScope.usercolor};" />
						</c:if>
						
						<input class="jrgwc" type="button" name="shoucang" value="收藏" style="width: 100px;background: #B0B0B0;" id="enshrine"><i class="icon icon-heart"></i></input>

					</div>
				</div>
				<div class="clear"></div>
			</div>
		</form>
		<c:if test="${sessionScope.usercolor == null}">
		<footer id="backcolor2" class="mt20 center" style="margin-top: 100px;background: #671B0D;color:#B0B0B0;">
		</c:if>
		<c:if test="${sessionScope.usercolor != null}">
		<footer id="backcolor2" class="mt20 center" style="margin-top: 100px;background: ${sessionScope.usercolor};color:#B0B0B0;">
		</c:if>
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>

		</footer>

	</body>

</html>